const {
    ipcRenderer
} = require('electron')
const path = require('path')
const {
    v4: uuidv4
} = require('uuid')
const md5File = require('md5-file')
let itemsPaths = []

// 选择文件, 触发dialog
$('select').addEventListener('click', function () {
    ipcRenderer.send('open-music-dialog')
})

// 导入选择的文件
$('import').addEventListener('click', () => {
    ipcRenderer.send('add-items', itemsPaths)
})

const renderHTML = (arr) => {
    const lists = $('musicList')
    // 获取路径中的文件名称
    // 动态添加文件名称到页面上来
    // const result = arr.map(item => path.basename(item))  
    let index = 0
    const htmlstr = arr.reduce((html, item) => {
        html += `<li class="list-group-item">
        <div class="row d-flex justify-content-between align-items-center px-3 py-2">
        <div><i class="fa fa-music mr-3" aria-hidden="true"></i>${item.fileName}</div>
        <div class="ctrls">
            <i class="fa fa-trash" aria-hidden="true" data-num="${index}"></i>
        </div>
    </div>
        </li>`
        index++
        return html
    }, '')
    lists.innerHTML = `<ul class="list-group">${htmlstr}</ul>`
}

// 获取选择音乐的文件路径 
ipcRenderer.on('selected-files', async (event, args) => {
    if (Array.isArray(args)) {
        // 保留已有的元素, 添加新的元素到列表 (而不是直接把列表情况或者设置新的列表)
        // let arr = []
        // for (let i = 0; i < args.length; i++) {
        //     const item = args[i]
        //     arr.push({
        //         id: uuidv4(),
        //         path: item,
        //         fileName: path.basename(item),
        //         md5: await md5File(item)
        //     })
        // }
        // 方法一: for -> for
        // 方法二: Set arr.md5 -> newArr -> md5
        // const newArr = Array.from(new Set(arr.map(item => item.md5)))
        // let rlist = []
        // arr.map(item => {
        //     if (newArr.indexOf(item.md5) !== -1) {
        //         rlist.push(item)
        //         // 去重
        //         newArr.splice(newArr.indexOf(item.md5), 1)
        //     }
        // })
        // 方法三
        let arr = {}
        for (let i = 0; i < args.length; i++) {
            const item = args[i]
            const md5 = await md5File(item)
            arr[md5] = {
                id: uuidv4(),
                path: item,
                fileName: path.basename(item),
            }
        }
        const rlist = Object.keys(arr).map(key => {
            arr[key].md5 = key
            return arr[key]
        })
        const newItems = rlist.filter(item => {
            const md5s = itemsPaths.map(i => i.md5)
            return md5s.indexOf(item.md5) < 0
        })
        itemsPaths = [...newItems, ...itemsPaths]
        renderHTML(itemsPaths)
        const lists = $('musicList')
        lists.addEventListener('click', (event) => {
            const {
                classList,
                dataset
            } = event.target
            if (classList.contains('fa-trash')) {
                // 从列表中删除点击的文件
                const num = dataset.num
                if (num) {
                    itemsPaths.splice(num, 1)
                    // itemsPaths = args
                    renderHTML(itemsPaths)
                }
            }
        })
    }
})